<template>
  <view class="container">
    <!-- Experiment Header -->
    <view class="experiment-header">
      <view class="title-section">
        <text class="title">{{ experiment.title }}</text>
        <view class="status-badge" :class="experiment.status.toLowerCase()">
          {{ experiment.status }}
        </view>
      </view>
      <view class="meta-info">
        <view class="info-item">
          <u-icon name="calendar" size="28" color="#666"></u-icon>
          <text>{{ experiment.date }}</text>
        </view>
        <view class="info-item">
          <u-icon name="clock" size="28" color="#666"></u-icon>
          <text>{{ experiment.duration }}</text>
        </view>
      </view>
    </view>

    <!-- Experiment Content -->
    <scroll-view scroll-y class="content-section">
      <!-- Overview -->
      <view class="section">
        <text class="section-title">Overview</text>
        <text class="description">{{ experiment.description }}</text>
      </view>

      <!-- Objectives -->
      <view class="section">
        <text class="section-title">Learning Objectives</text>
        <view class="objectives-list">
          <view 
            v-for="(objective, index) in experiment.objectives"
            :key="index"
            class="objective-item"
          >
            <u-icon name="checkmark-circle" size="28" color="#4b7bec"></u-icon>
            <text>{{ objective }}</text>
          </view>
        </view>
      </view>

      <!-- Materials -->
      <view class="section">
        <text class="section-title">Required Materials</text>
        <view class="materials-list">
          <view 
            v-for="(material, index) in experiment.materials"
            :key="index"
            class="material-item"
          >
            <image :src="material.image" mode="aspectFill" class="material-image"></image>
            <view class="material-info">
              <text class="material-name">{{ material.name }}</text>
              <text class="material-quantity">{{ material.quantity }}</text>
            </view>
          </view>
        </view>
      </view>

      <!-- Procedure -->
      <view class="section">
        <text class="section-title">Procedure</text>
        <view class="procedure-steps">
          <view 
            v-for="(step, index) in experiment.procedure"
            :key="index"
            class="step-item"
          >
            <view class="step-number">{{ index + 1 }}</view>
            <view class="step-content">
              <text class="step-text">{{ step.instruction }}</text>
              <image 
                v-if="step.image"
                :src="step.image"
                mode="aspectFill"
                class="step-image"
              ></image>
            </view>
          </view>
        </view>
      </view>

      <!-- Results Recording -->
      <view class="section">
        <text class="section-title">Results</text>
        <view class="results-form">
          <!-- Observations -->
          <view class="form-group">
            <text class="form-label">Observations</text>
            <u-textarea
              v-model="results.observations"
              placeholder="Record your observations here..."
              height="200"
            ></u-textarea>
          </view>

          <!-- Data Collection -->
          <view class="form-group">
            <text class="form-label">Data Collection</text>
            <view class="data-table">
              <view class="table-header">
                <text v-for="(col, index) in experiment.dataColumns" :key="index">
                  {{ col }}
                </text>
              </view>
              <view 
                v-for="(row, rowIndex) in results.data"
                :key="rowIndex"
                class="table-row"
              >
                <u-input
                  v-for="(col, colIndex) in experiment.dataColumns"
                  :key="colIndex"
                  v-model="results.data[rowIndex][colIndex]"
                  type="number"
                ></u-input>
              </view>
              <u-button 
                size="mini" 
                icon="plus"
                @click="addDataRow"
              >Add Row</u-button>
            </view>
          </view>

          <!-- Image Upload -->
          <view class="form-group">
            <text class="form-label">Result Images</text>
            <u-upload
              :fileList="results.images"
              @afterRead="onImageUpload"
              @delete="onImageDelete"
              :maxCount="4"
            ></u-upload>
          </view>

          <!-- Conclusion -->
          <view class="form-group">
            <text class="form-label">Conclusion</text>
            <u-textarea
              v-model="results.conclusion"
              placeholder="Write your conclusion here..."
              height="200"
            ></u-textarea>
          </view>
        </view>
      </view>
    </scroll-view>

    <!-- Action Buttons -->
    <view class="action-buttons">
      <u-button 
        :plain="true"
        icon="file"
        @click="downloadProcedure"
      >Download Procedure</u-button>
      <u-button
        type="primary"
        icon="checkmark"
        @click="submitResults"
      >Submit Results</u-button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      experimentId: null,
      experiment: {
        title: 'Blood Type Analysis',
        status: 'In Progress',
        date: '2024-03-21',
        duration: '2 hours',
        description: 'Learn to determine blood types using standard testing procedures...',
        objectives: [
          'Understand blood typing methodology',
          'Practice proper laboratory techniques',
          'Analyze and interpret results accurately',
          'Document findings professionally'
        ],
        materials: [
          {
            name: 'Blood Typing Kit',
            quantity: '1 per student',
            image: '/static/images/kit.jpg'
          },
          {
            name: 'Microscope',
            quantity: '1 per station',
            image: '/static/images/microscope.jpg'
          }
        ],
        procedure: [
          {
            instruction: 'Clean the testing surface thoroughly...',
            image: '/static/images/step1.jpg'
          },
          {
            instruction: 'Place three drops of blood sample...',
            image: '/static/images/step2.jpg'
          }
        ],
        dataColumns: ['Sample #', 'Anti-A', 'Anti-B', 'Anti-D', 'Blood Type']
      },
      results: {
        observations: '',
        data: [
          ['1', '', '', '', '']
        ],
        images: [],
        conclusion: ''
      }
    }
  },
  onLoad(options) {
    if (options.id) {
      this.experimentId = options.id
      // TODO: Fetch experiment data
    }
  },
  methods: {
    addDataRow() {
      const newRow = Array(this.experiment.dataColumns.length).fill('')
      newRow[0] = String(this.results.data.length + 1)
      this.results.data.push(newRow)
    },
    onImageUpload(event) {
      const { file } = event.detail
      // TODO: Handle image upload to server
      this.results.images.push({
        url: file.url,
        status: 'success',
        message: file.name
      })
    },
    onImageDelete(event) {
      const index = event.detail.index
      this.results.images.splice(index, 1)
    },
    downloadProcedure() {
      // TODO: Implement procedure download
      uni.showToast({
        title: 'Downloading procedure...',
        icon: 'none'
      })
    },
    async submitResults() {
      if (!this.validateResults()) {
        uni.showToast({
          title: 'Please complete all required fields',
          icon: 'none'
        })
        return
      }

      uni.showLoading({
        title: 'Submitting results...'
      })

      try {
        // TODO: Implement results submission
        await new Promise(resolve => setTimeout(resolve, 1500))
        
        uni.hideLoading()
        uni.showToast({
          title: 'Results submitted successfully',
          icon: 'success'
        })
        
        // Navigate back
        uni.navigateBack()
      } catch (error) {
        uni.hideLoading()
        uni.showToast({
          title: 'Submission failed',
          icon: 'error'
        })
      }
    },
    validateResults() {
      return (
        this.results.observations.trim() &&
        this.results.conclusion.trim() &&
        this.results.data.every(row => row.every(cell => cell.trim()))
      )
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background-color: #f8f9fa;
  display: flex;
  flex-direction: column;
}

.experiment-header {
  background-color: #ffffff;
  padding: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

  .title-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;

    .title {
      font-size: 36rpx;
      font-weight: bold;
      color: #333;
      flex: 1;
      margin-right: 20rpx;
    }

    .status-badge {
      padding: 4rpx 20rpx;
      border-radius: 20rpx;
      font-size: 24rpx;

      &.pending {
        background-color: rgba(75, 123, 236, 0.1);
        color: #4b7bec;
      }

      &.in.progress {
        background-color: rgba(255, 159, 67, 0.1);
        color: #ff9f43;
      }

      &.completed {
        background-color: rgba(46, 213, 115, 0.1);
        color: #2ed573;
      }
    }
  }

  .meta-info {
    display: flex;
    gap: 30rpx;

    .info-item {
      display: flex;
      align-items: center;
      gap: 10rpx;
      
      text {
        font-size: 26rpx;
        color: #666;
      }
    }
  }
}

.content-section {
  flex: 1;
  padding-top: 30rpx;

  .section {
    background-color: #ffffff;
    border-radius: 12rpx;
    padding: 30rpx;
    margin-bottom: 30rpx;

    .section-title {
      font-size: 30rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 20rpx;
    }

    .description {
      font-size: 28rpx;
      color: #666;
      line-height: 1.6;
    }
  }
}

.objectives-list {
  .objective-item {
    display: flex;
    align-items: center;
    gap: 16rpx;
    margin-bottom: 16rpx;

    text {
      font-size: 28rpx;
      color: #333;
      line-height: 1.4;
    }
  }
}

.materials-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300rpx, 1fr));
  gap: 20rpx;

  .material-item {
    background-color: #f8f9fa;
    border-radius: 8rpx;
    overflow: hidden;

    .material-image {
      width: 100%;
      height: 200rpx;
    }

    .material-info {
      padding: 16rpx;

      .material-name {
        font-size: 28rpx;
        color: #333;
        margin-bottom: 8rpx;
      }

      .material-quantity {
        font-size: 24rpx;
        color: #666;
      }
    }
  }
}

.procedure-steps {
  .step-item {
    display: flex;
    gap: 20rpx;
    margin-bottom: 30rpx;

    .step-number {
      width: 40rpx;
      height: 40rpx;
      background-color: #4b7bec;
      color: #ffffff;
      border-radius: 20rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24rpx;
      flex-shrink: 0;
    }

    .step-content {
      flex: 1;

      .step-text {
        font-size: 28rpx;
        color: #333;
        line-height: 1.6;
        margin-bottom: 16rpx;
      }

      .step-image {
        width: 100%;
        height: 300rpx;
        border-radius: 8rpx;
      }
    }
  }
}

.results-form {
  .form-group {
    margin-bottom: 30rpx;

    .form-label {
      font-size: 28rpx;
      color: #333;
      margin-bottom: 16rpx;
      display: block;
    }
  }

  .data-table {
    border: 2rpx solid #eee;
    border-radius: 8rpx;
    overflow: hidden;

    .table-header {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      background-color: #f8f9fa;
      padding: 16rpx;
      gap: 16rpx;

      text {
        font-size: 26rpx;
        color: #333;
        font-weight: bold;
        text-align: center;
      }
    }

    .table-row {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      padding: 16rpx;
      gap: 16rpx;
      border-top: 2rpx solid #eee;
    }
  }
}

.action-buttons {
  padding: 30rpx;
  display: flex;
  gap: 20rpx;
  background-color: #ffffff;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);

  :deep(.u-button) {
    flex: 1;
  }
}
</style> 